import React, { Component } from 'react'
import Banner from 'containers/banner'
import Modal from 'containers/modal'
import Styles from './index.less'
function Sub(props){
  return (
    <ul className={Styles.sub}>
      {
        props.imgNews.map((item) => (
          <li key={item.img}>
            <img src={item.img}/>
            <span>{item.title}</span>
          </li>
        ))
      }
    </ul>
  )
}
export default class Newscenter extends Component {
  constructor() {
    super()
    this.state = {
      imgNews: [
        {
          img: 'https://img.alicdn.com/tfs/TB19zxDH1uSBuNjy1XcXXcYjFXa-350-194.png',
          title: 'ICA联盟成为GlobalPlatform’s Sixth Annual Seminar合作伙伴'
        },
        {
          img: 'https://img.alicdn.com/tfs/TB1QLFyH1OSBuNjy0FdXXbDnVXa-350-194.png',
          title: '重庆云栖大会ICA论坛—以ICA联盟生态之美撼动产业价值'
        },
        {
          img: 'https://img.alicdn.com/tfs/TB19dFyH7yWBuNjy0FpXXassXXa-350-194.png',
          title: '物联网安全专家齐聚联盟 多项IoT身份认证安全标准出炉'
        },
        {
          img: 'https://img.alicdn.com/tfs/TB1CkvCaO6guuRjy1XdXXaAwpXa-350-194.png',
          title: 'ICA联盟安全标准组第六次成员大会'
        },
      ],
      dialogShow: false
    }
    this.videoDialogControl = this.videoDialogControl.bind(this)
  }
  videoDialogControl(isShow) {
    return () => {
       this.setState({
        dialogShow: isShow
      })
    }
  }
  render() {
    const { dialogShow } = this.state
    return (
      <div className={Styles.newscenter}>
        <Banner backgroundImg="https://img.alicdn.com/tfs/TB1kyz2H1uSBuNjy1XcXXcYjFXa-1440-640.png">
          <div className={Styles.bannerContainer}>
            <h1 style={{marginTop: 100,}}>新闻活动</h1>
            <p>ICA联盟致力于为合作伙伴提供强业务相关的权益与服务，积极推动物联网行业发展，组织开展各类新技术、新业务、新市场的交流活动，促进成员增进了解、加强合作、实现共赢。</p>
            <div className={Styles.imgNews}> 
              <div className={Styles.main} onClick={this.videoDialogControl(true)}>
                 <img src="https://img.alicdn.com/tfs/TB10HmxeXzqK1RjSZFoXXbfcXXa-826-620.png" className={Styles.img}/>
                 <img src="https://img.alicdn.com/tfs/TB1NJJxH3mTBuNjy1XbXXaMrVXa-126-126.png" className={Styles.play}/>
                 <h4>阿里成立独立芯片公司“平头哥</h4>
                 <p>城市大脑2.0发布；马云谈新制造 | 云栖大会集锦</p>
              </div>
              <Sub imgNews={this.state.imgNews}/>
            </div>
          </div>
        </Banner>
        <Modal visible={dialogShow} onCancel={this.videoDialogControl(false)}>
            <div className={Styles.video}>
              <video width="800" src="//cloud.video.taobao.com/play/u/2663106983/p/1/e/6/t/1/50233038616.mp4" preload="auto" controls></video>
              <span className={Styles.videoClose} onClick={this.videoDialogControl(false)}>×</span>
            </div>
        </Modal>
      </div>
    )
  }
}
